<!DOCTYPE html>
<!--suppress ALL-->
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我的借阅记录</title>
    <link rel="stylesheet" type="text/css" href="/static/jquery-easyui-1.7.0/themes/metro-blue/easyui.css">
    <link rel="stylesheet" type="text/css" href="/static/jquery-easyui-1.7.0/themes/icon.css">
    <script type="text/javascript" src="/static/jquery-easyui-1.7.0/jquery.min.js"></script>
    <script type="text/javascript" src="/static/jquery-easyui-1.7.0/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="/static/jquery-easyui-1.7.0/locale/easyui-lang-zh_CN.js"></script>
    <script type="text/javascript">
        var url;

        function searchBorrowRecord() {
            $("#dg").datagrid('load', {
                "bookName": $("#s_bookName").val(),
                "state": $("#s_state").val()
            });
        }

        function resetValue() {

            $("#s_bookName").val("");
            $("#s_state").combobox("setValue", "");
        }

        function dateFormat(fmt, date) {
            let ret;
            const opt = {
                "Y+": date.getFullYear().toString(),        // 年
                "m+": (date.getMonth() + 1).toString(),     // 月
                "d+": date.getDate().toString(),            // 日
                "H+": date.getHours().toString(),           // 时
                "M+": date.getMinutes().toString(),         // 分
                "S+": date.getSeconds().toString()          // 秒
                // 有其他格式化字符需求可以继续添加，必须转化成字符串
            };
            for (let k in opt) {
                ret = new RegExp("(" + k + ")").exec(fmt);
                if (ret) {
                    fmt = fmt.replace(ret[1], (ret[1].length == 1) ? (opt[k]) : (opt[k].padStart(ret[1].length, "0")))
                }
                ;
            }
            return fmt;
        }

        function formatTime(val, row) {
            let date = new Date();
            return dateFormat("YYYY-mm-dd HH:MM:SS", new Date(val));
        }

        function formatState(val, row) {
            if (val == 1) {
                return "<span style='color: #0000FF'>正在借阅</span>";
            } else if (val == 2) {
                return "<span style='color: #0c9076'>已还书</span>";
            } else {
                return "<span style='color: red'>逾期</span>";
            }
        }

        function addBorrowRecordDay() {
            var selectedRows = $("#dg").datagrid("getSelections");
            if (selectedRows.length == 0) {
                $.messager.alert("系统提示", "请选择一本要续借的图书！");
                return;
            }
            var id = selectedRows[0].id;
            var bookId = selectedRows[0].bookId;
            var state = selectedRows[0].state;
            var day = selectedRows[0].day;
            if (state != 1) {
                $.messager.alert("系统提示", "该图书不可续借，只有正在借阅的图书才可以续借！");
                return;
            }
            if (day > 60) {
                $.messager.alert("系统提示", "该图书不可续借，因为你已经续借过两次了！");
                return;
            }
            $.messager.confirm("系统提示", "您确定要续借吗?", function (r) {
                if (r) {
                    $.ajax({
                        url: "/admin/book/addBorrowRecordDay",
                        type: "post",
                        data: {id: id},
                        success: function (result) {
                            if (result.success) {
                                $("#dg").datagrid("reload");
                                $.messager.alert("系统提示", "续借成功，续借天数为30天");
                            }
                        },
                    });
                }
            });
        }

        function returnBook() {
            var selectedRows = $("#dg").datagrid("getSelections");
            if (selectedRows.length == 0) {
                $.messager.alert("系统提示", "请选择一本要归还的图书！");
                return;
            }
            var id = selectedRows[0].id;
            var bookId = selectedRows[0].bookId;
            var state = selectedRows[0].state;
            if (state == 2) {
                $.messager.alert("系统提示", "该图书已经归还，不可以重复归还！");
                return;
            }
            $.messager.confirm("系统提示", "您确定要归还吗?", function (r) {
                if (r) {
                    $.ajax({
                        url: "/admin/book/returnBook",
                        type: "post",
                        data: {id: id, bookId: bookId},
                        success: function (result) {
                            if (result.success) {
                                $("#dg").datagrid("reload");
                                $.messager.alert("系统提示", "归还成功!");
                            }
                        },
                    });
                }
            });
        }

        function formatImage(val, row) {
            return "<img height=66 src='/static/images/bookImage/" + val + "'/>";
        }
    </script>
</head>
<body style="margin: 1px">
<table id="dg" title="我的借阅" class="easyui-datagrid" striped="true" singleSelect="true"
       fitColumns="true" pagination="true" rownumbers="true"
       url="/admin/borrowRecord/list" fit="true" toolbar="#tb">
    <thead>
    <th field="cb" checkbox="true" align="center"></th>
    <th field="id" width="20" align="center" hidden="hidden">编号</th>
    <th field="imageName" width="20" align="center" formatter="formatImage">图片</th>
    <th field="bookName" width="50" align="center">书名</th>
    <th field="day" width="15" align="center">借阅时间（天）</th>
    <th field="state" width="20" align="center" formatter="formatState">当前状态</th>
    <th field="time" width="20" align="center" formatter="formatTime">借书时间</th>
    <th field="returnTime" width="20" align="center" formatter="formatTime">最晚还书时间</th>
    </thead>
</table>

<div id="tb">
    <div>
        <a href="javascript:addBorrowRecordDay()" class="easyui-linkbutton" iconCls="icon-addBorrowDay"
           plain="true">续借</a>
        <a href="javascript:returnBook()" class="easyui-linkbutton" iconCls="icon-returnBook"
           plain="true">还书</a>
    </div>
    <div>
        &nbsp;图书名称：&nbsp;<input type="text" id="s_bookName" size="20"
                                onkeydown="if(event.keyCode==13) searchBorrowRecord()"/>
        &nbsp;当前状态:&nbsp;
        <select id="s_state" class="easyui-combobox" editable="false" style="width:100px;"
                data-options="panelHeight:'auto'">
            <option value="">请选择...</option>
            <option value="1">正在借阅</option>
            <option value="2">已还书</option>
            <option value="3">逾期</option>
        </select>
        <a href="javascript:searchBorrowRecord()" class="easyui-linkbutton" iconCls="icon-search" plain="true">搜索</a>
        <a href="javascript:resetValue()" class="easyui-linkbutton" iconCls="icon-reset" plain="true">重置</a>
    </div>
</div>
</body>
</html>